<template>
    <table>
        <thead class="k-table-head">
            <tr>
                <th v-for="item in head" :style="{width:(item.width||'')+'px'}">
                    <div class="ceil">
                        {{ item.label }}
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-if="!model.length">
                <td :colspan="head.length">
                    <div class="k-table-none">无数据</div>
                    
                </td>
            </tr>
            <tr class="k-table-tr" v-for="(row,i) in model">
                <td v-for="item in head">
                    <div :class="'ceil ' + $attrs.ceilstyle">
                        {{ !item.uds?item.props?.split(".").reduce((res,key)=>res[key],row):"" }}
                        <button 
                            v-if="item.uds" 
                            v-for="btn in item.btns" 
                            :class="
                            (btn.type===''||!btn.type)?
                            'default ke-table-button'
                            :btn.type + ' color-btn ke-table-button'" 
                            @click="btn.func&&btn.func(row)"
                        >
                            {{ btn.name}}
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
// import { reactive, ref } from 'vue';


// const selectArr = reactive([])

defineProps({
    head:Array,
    model:Array,
})
// head 类型要求
// label 表头文字
// props 读取该属性直接读数据字段
// uds 默认undefined，true时覆盖props控制
// btns: 需要uds生效 Array
// name: btn 名称
// type 表示btn的样式 s p w d i
// func 表示click事件绑定




// function Select() {

// }
</script>

<style>
.k-table-head{
    position: relative;
    z-index: 3;
    color: #909399;
    font-size: small;
}
.k-table-head::after{
    content: " ";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #aaa;
}
.k-table-none{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: small;
    color: #909399;
    font-weight: 800;
    height: 40px;
}
.k-table-tr{
    font-size: small;
    position: relative;
    border-bottom: 1px solid #ddd;
    background-color: #FFF;
    color: rgb(96, 98, 102);
}
.k-table-tr:nth-child(2n+1){
    background-color: #ECF5FF;
}
.k-table-tr:hover {
    background-color: #f1f4ff;
}
/* .k-table-tr::after{
    content: " ";
    position: absolute;
    height: 1px;
} */

.ceil{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    min-height: 30px;

    padding: 0 12px;
}
.ke-table-button{
    font-size: 14px;
    padding: 0px 5px;
    border-radius: 3px;
    display: inline;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
}

.k-tbody-seth{
    overflow-y: auto;
}
</style>